<template>
	<view class="live-page">
		<view class="live-container">
			<view class="live-welcome" v-if="loadWelcome && played=='notPlayed'">
				<view class="live-wel-panel">
					<view >
						欢迎进入百家乐游戏
					</view>
					<view class="live-wel-confirm" @click="handleWelcomeClose()">
						确定
					</view>
				</view>
			</view>
			<selectChip v-if="showMoreChips" :choiceChips="choiceChips" @cancel="setShoeChips($event)" @confirm="handleConfirm($event)" ></selectChip>
			<headbar ref="headBar"></headbar>
			<view class="live-box" style="" >
				<view style="z-index: 20;" class="live-video" id="live-video-far" :class="{'live-video-top': enlarge}" >
				</view>
				<view style="z-index: 20;" class="live-video" id="live-video-near" :class="{'live-video-top': !enlarge}" >
				</view>
				<view style="z-index: 19;" class="live-loading" >
					<view class="live-loading-panel">
						<image class="live-loading-img" src="/static/img/live/loading.svg" mode="" ></image>
						<view class="">
							正在为您优选网络
						</view>
					</view>
					
				</view>
				<view style="z-index: 26;" class="live-count-down" v-if="tableInfo.end_time > 0">
					<circleProgress :percent="72" :size="50" :direction="320" :circleWidth="2" :circleColor="activeColor" :innerbgColor="innerbgColor" :defaultColor="defaultColor">
						<text class="live-count-second" :class="{'live-active-color': tableInfo.end_time < 6}">{{tableInfo.end_time}}</text>
					</circleProgress>
				</view>
				<view class="live-notice" v-if="showOpen">
					{{activityDescribe}}
				</view>
				<view class="live-zoom" style="z-index: 21;">
					<image src="/static/img/live/enlarge.svg" mode="" v-if="!enlarge" @click="handleZoom()"></image>
					<image src="/static/img/live/reduce.svg" mode="" v-if="enlarge" @click="handleZoom()"></image>
				</view>
			</view>
			<bat :choiceChips="choiceChips" :endState="tableInfo.end_time" :tableDataInfo="tableInfo"
			:betState="betState" @openMoreChip="setShoeChips($event)" 
			@betLoadAudi="startSoundEffect($event.audiName)" @betting="startSoundEffect($event.audiName)"
			@betSuccess="handleRefresh()" ></bat>
			<view class="live-result" v-if="resultInfo.info">
				<view class="live-result-panel" 
				:class="[{'live-win-blue-bg': resultInfo.result.zhuang_point < resultInfo.result.xian_point},{'live-win-green-bg': resultInfo.result.zhuang_point == resultInfo.result.xian_point}]">
					<view class="live-result-top live-result-blue">
						<view class="live-result-txt">
							<text class="">
								闲
							</text>
							<text class="live-result-tally">
								{{resultInfo.result.xian_point}}
							</text>
						</view>
						<view class="live-result-t-card " >
							<image class="live-result-card " :src="`/static/img/poker/${resultInfo.info.xian[6]}`" mode=""></image>
						</view>
					</view>
					<view class="live-result-bottom">
						<view class="">
							<image class="live-result-card" :src="`/static/img/poker/${resultInfo.info.xian[4]}`" mode=""></image>
						</view>
						<view class="">
							<image class="live-result-card" :src="`/static/img/poker/${resultInfo.info.xian[5]}`" mode=""></image>
						</view>
					</view>
				</view>
				<view class="live-equality" >
					<text class="live-equality-he" v-if="resultInfo.result.zhuang_point == resultInfo.result.xian_point">和</text>
					<text class="live-equality-zhuang" v-if="resultInfo.result.zhuang_point > resultInfo.result.xian_point">庄赢</text>
					<text class="live-equality-xian" v-if="resultInfo.result.zhuang_point < resultInfo.result.xian_point">闲赢</text>
				</view>
				<view class="live-result-panel " 
				:class="[{'live-win-bg': resultInfo.result.zhuang_point > resultInfo.result.xian_point},{'live-win-green-bg': resultInfo.result.zhuang_point == resultInfo.result.xian_point}]">
					<view class="live-result-top live-result-red live-result-end">
						<view class="live-result-t-card">
							<image class="live-result-card" :src="`/static/img/poker/${resultInfo.info.zhuang[1]}`" mode=""></image>
						</view>
						<view class="live-result-txt">
							<text class="">
								庄
							</text>
							<text class="live-result-tally live-result-tally-r">
								{{resultInfo.result.zhuang_point}}
							</text>
						</view>
						
					</view>
					<view class="live-result-bottom live-result-c-end">
						<view class="">
							<image class="live-result-card" :src="`/static/img/poker/${resultInfo.info.zhuang[3]}`" mode=""></image>
						</view>
						<view class="">
							<image class="live-result-card" :src="`/static/img/poker/${resultInfo.info.zhuang[2]}`" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="details">
				<iframe class="live-details" :src="configService.lzUrl+'/?tableId=' + typeId" ></iframe>
			</view>
			<view class="live-result-detail">
				<text>总投注:{{betDetails.count_money}}</text>
				<text class="live-de-zhuang">庄:{{betDetails.zhuang}}</text>
				<text class="live-de-xian">闲:{{betDetails.xian}}</text>
				<text class="live-de-he">和:{{betDetails.he}}</text>
				<text>总局数:{{betDetails.count}}</text>
			</view>
			<!-- 
			<view class="logo">
				<image class="logo" :src="logoUrl" mode=""></image>
			</view> 
			-->
		</view>
		
	</view>
</template>

<script>
	import headbar from './head.vue'
	import user from "@/api/api"
	import bat from './bat.vue'
	import selectChip from './selectChip.vue'
	import circleProgress from '@/components/circle-progress/progress.vue'
	import apiService from '@/api/game.js'
	import {socketTask,URL,SocketTask} from '@/api/socket.js'
	import configService from '@/common/service/config.service.js'
	// import otherPlace from '@/components/otherPlace/otherPlace.vue'
	
	
	let hidden, visibilityChange;
	if (typeof document.hidden !== "undefined") {
	    hidden = "hidden";
	    visibilityChange = "visibilitychange";
	} else if (typeof document.mozHidden !== "undefined") {
	    hidden = "mozHidden";
	    visibilityChange = "mozvisibilitychange";
	} else if (typeof document.msHidden !== "undefined") {
	    hidden = "msHidden";
	    visibilityChange = "msvisibilitychange";
	} else if (typeof document.webkitHidden !== "undefined") {
	    hidden = "webkitHidden";
	    visibilityChange = "webkitvisibilitychange";
	}
	export default {
		components: {
			headbar,
			bat,
			circleProgress,
			selectChip,
			// otherPlace
		},
		data() {
			return {
				/**
				 * 选择的筹码
				 * */
				choiceChips: [
					{
						index: 0,
						val: 1,
						text: '1',
						color: '#f6cb09',
						bet: true,
						active:false
					},{
						index: 1,
						val: 5,
						text: '5',
						color: '#e72d00',
						bet: true,
						active:false
					},{
						index: 2,
						val: 10,
						text: '10',
						color: '#605925',
						bet: true,
						active:false
					},
					{
						index: 3,
						val: 20,
						text: '20',
						color: '#2c96b9',
						bet: true,
						active:false
					},
					{
						index: 4,
						val: 50,
						text: '50',
						color: '#39c311',
						bet: false,
						active:false
					}
				],
				//是否展示更多筹码
				showMoreChips: false,
				typeId: 1,
				//进度
				percent: 20,
				//定时器
				timer: null,
				//桌球信息
				tableInfo: {},
				//激活倒计时颜色
				activeColor: '#78E07A',
				//活动描述
				activityDescribe: '',
				//圈内颜色
				innerbgColor: 'RGB(0,0,0,.6)',
				//圆环底部颜色
				defaultColor: 'rgb(135,135,135,.1)',
				//展示第一次投注描述
				firstShowDescribe: false,
				//显示开牌中
				showOpen: false,
				//展示开局中
				showBeginning: false,
				//safari加载欢迎
				loadWelcome: false,
				//活动描述定时器
				activityTimer: null,
				//判断是否进行第二次请求(根据tableInfo.end_time判断,例:如果一直是0 表示没有重新请求)
				secondRequest: true,
				//tableInfo.end_time
				endTime: -99,
				//开牌信息
				resultInfo: {},
				//是否放大缩小
				enlarge: false,
				//用户信息
				userInformation: {},
				//下注详情
				betDetails: {},
				//投注状态
				betState: false,
				//局号
				bureauNumber: '',
				//音乐音效状态
				musicState: {
					backgroundMusicState: uni.getStorageSync('backgroundMusicState'),//背景音乐
					musicEffectSate: uni.getStorageSync('musicEffectSate')//音效
				},
				//音频
				audio: null,
				//是否播放过
				played: 'init',
				//logo图片地址
				logoUrl: uni.getStorageSync('logoUrl'),
				//页面可视状态 
				pageVisibility: false,
				//视频 加载
				videoLoadState: true,
				//是否播入过欢迎光临
				welcomePlayed: false,
				configService:configService,
				//socket
				socketTask: null,
			};
		},
		onLoad(option) {
			this.userInformation = uni.getStorageSync('login_user_info')
			if(option.id) this.typeId = option.id
			
		},
		mounted(){
			this.socketTask = new SocketTask()
			this.socketTask.connect()
			this.socketTask.onOpen(res => {
				this.socketTask.sendMsg({table_id: this.typeId, game_type: 3, user_id: this.userInformation.id})
			})
			
			this.receiveMsg()
			// this.connectSocket()
			this.audio = new Audio()
			this.getTableInfoVideo()
			this.checkIsLogin()
			this.handlePageVisibility()
			this.startSoundEffect("none.wav")
			// this.userInformation = uni.getStorageSync('login_user_info')
			// if(option.id) this.typeId = option.id
			this.checkBrowser()
			this.getUserInfos()
			this.getGameTableInfo()
			this.getGameTableBet()
			this.initAudio()
		},
		onUnload() {
			clearTimeout(this.timer)
			clearTimeout(this.activityTimer)
			uni.closeSocket({})
		},
		methods: {
			/**
			 * 获取视频 地址
			 * **/
			getTableInfoVideo(){
				this.videoLoadState = true
				apiService.getTableInfoVideo({id: this.typeId}).then(res => {
					if(res.data.code == 200) {
						this.createIframe('live-video-far',res.data.data.video_far)
						this.createIframe('live-video-near',res.data.data.video_near)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			/**
			 * 创建video iframe
			 * **/
			createIframe(boxId,src){
				var iframe = document.createElement("iframe");
				iframe.src = src //"http://x.video.wan888.club?tableVideo=bjltf1"
				iframe.style.width = '100%'
				iframe.style.height = '100%'
				iframe.style.border = 'none'
				if (iframe.attachEvent){
					iframe.attachEvent("onload", () => {
						this.videoLoadState = false
					});
				} else {
					iframe.onload = () => {
						this.videoLoadState = false
					};
				}
				let box = document.getElementById(boxId)
				// box.innerHTML = ""
				box.appendChild(iframe)
				this.$forceUpdate()
			},
			
			/**
			 * 监听页面后台运行
			 * */
			handlePageVisibility() {
				
				document.addEventListener(visibilityChange, ()=> {
					this.pageVisibility = document[hidden]
					this.setAudioVolume()
				});
			},
			
			/**
			 * 判断浏览器
			 * 如果 是safari 背景为关闭 才弹提示
			 * **/
			checkBrowser(){
				let userAgent = navigator.userAgent
				if (userAgent.indexOf("Safari") > -1 && (this.musicState.backgroundMusicState != 'off' || this.musicState.musicEffectSate!='off') && this.$innerAudioContext.paused) {
					// if(this.musicState.backgroundMusicState != 'off' && this.$innerAudioContext.paused) {
					// 	this.loadWelcome = true
					// }
					this.loadWelcome = true
				}
			},
			
			/**
			 * 接收消息
			 */
			receiveMsg() {
				this.socketTask.receiveMsg(res => {
					if(!this.isJSON(res.data.trim())) {
						return
					}
					/**
					 * result.data.result中
					 * zhuang_point 庄点数
					 * xian_point 闲点数
					 * zhuang_dui 是否庄对
					 * xian_dui 是否闲对
					 * win 主结果 =1 庄赢  =2 闲赢 =3 和牌   0错误
					 * size  大赢还是小赢 0 小赢   1大赢
					 * lucky 是否是幸运6   0不是  大于0是幸运6
					 * **/
					let result = JSON.parse(res.data)
					if(result.code == 200) {
						this.resultInfo = result.data
						if(this.bureauNumber != result.bureau_number) {
							this.bureauNumber = result.bureau_number
							this.startSoundEffect('OPENCARD.mp3')
							let time = 1700
							setTimeout(() => {
								this.startSoundEffect(`P${this.resultInfo.result.xian_point}.mp3`)
							},time)
							setTimeout(() => {
								this.startSoundEffect(`B${this.resultInfo.result.zhuang_point}.mp3`)
							},time + 2100)
							setTimeout(() => {
								//主结果 =1 庄赢  =2 闲赢 =3 和牌 
								switch(this.resultInfo.result.win) {
									case 1:
									this.startSoundEffect(`BANKER.mp3`)
									break
									case 2:
									this.startSoundEffect(`PLAYER.mp3`)
									break
									case 3:
									this.startSoundEffect(`TIED.mp3`)
									break
								}
								
							}, time + 4200)
							this.getGameTableBet()
							this.handleRefresh()
						}
						
					}
					setTimeout(() => {
						this.resultInfo = {}
						this.handleRefresh()
					}, 8000)
				})
				// uni.onSocketMessage((res) => {
				// 	if(!this.isJSON(res.data.trim())) {
				// 		return
				// 	}
				// 	/**
				// 	 * result.data.result中
				// 	 * zhuang_point 庄点数
				// 	 * xian_point 闲点数
				// 	 * zhuang_dui 是否庄对
				// 	 * xian_dui 是否闲对
				// 	 * win 主结果 =1 庄赢  =2 闲赢 =3 和牌   0错误
				// 	 * size  大赢还是小赢 0 小赢   1大赢
				// 	 * lucky 是否是幸运6   0不是  大于0是幸运6
				// 	 * **/
				// 	let result = JSON.parse(res.data)
				// 	if(result.code == 200) {
				// 		this.resultInfo = result.data
				// 		if(this.bureauNumber != result.bureau_number) {
				// 			this.bureauNumber = result.bureau_number
				// 			this.startSoundEffect('OPENCARD.mp3')
				// 			let time = 1700
				// 			setTimeout(() => {
				// 				this.startSoundEffect(`P${this.resultInfo.result.xian_point}.mp3`)
				// 			},time)
				// 			setTimeout(() => {
				// 				this.startSoundEffect(`B${this.resultInfo.result.zhuang_point}.mp3`)
				// 			},time + 2100)
				// 			setTimeout(() => {
				// 				//主结果 =1 庄赢  =2 闲赢 =3 和牌 
				// 				switch(this.resultInfo.result.win) {
				// 					case 1:
				// 					this.startSoundEffect(`BANKER.mp3`)
				// 					break
				// 					case 2:
				// 					this.startSoundEffect(`PLAYER.mp3`)
				// 					break
				// 					case 3:
				// 					this.startSoundEffect(`TIED.mp3`)
				// 					break
				// 				}
								
				// 			}, time + 4200)
				// 			this.getGameTableBet()
				// 			this.handleRefresh()
				// 		}
						
				// 	}
				// 	setTimeout(() => {
				// 		this.resultInfo = {}
				// 		this.handleRefresh()
				// 	}, 8000)
				// })
			},
			//检测是否是json格式的字符串
			isJSON(str) {
			    if(typeof(str) == 'string') {
			        try{
			            var obj = JSON.parse(str);
			            if(typeof(obj) === 'object' && obj) {
			                return true;
			            }
			            else {
			                return false;
			            }
			        }
			        catch(e) {
			            return false;
			        }
			    }
			},
			/**
			 * 获取用户信息取常用筹码
			 * **/
			getUserInfos() {
			    user.getUserInfo().then((res) => {
			        if (res.data.code == 200) {
			            this.choiceChips = res.data.data.user_chip
			        } else {
			            this.$tip.alert(res.data.message);
			        }
			    })
			},
			/**
			 * 刷新
			 * **/
			handleRefresh() {
				if(!this.$refs.headBar){
					return
				}
				this.$refs.headBar.userInfos()
			},
			
			/**
			 * 确定回到游戏
			 * */
			handleWelcomeClose() {
				//背景音乐开启且首次加载且音乐暂停状态
				this.$innerAudioContext.play()
				this.startSoundEffect("none.wav")
				this.loadWelcome = false
			},
			
			/**
			 * 选择筹码的确定
			 * @param {data} 已选筹码   
			 * */
			handleConfirm(data) {
				this.choiceChips = data
				this.showMoreChips = false
			},
			
			/**
			 * 设置是否打开更多筹码选择
			 * @param {b} true false 
			 * **/
			setShoeChips(b) {
				this.showMoreChips = b
			},
			getGameTableBet() {
				apiService.gameTableBet({table_id: this.typeId}).then(res => {
					if(res.data.code == 200) {
						this.betDetails = res.data.data
					}
				}).catch(error => {
					console.log(error)
				})
			},
			/**
			 * 放大缩小
			 * */
			handleZoom() {
				this.enlarge = !this.enlarge
			},
			
			//音频
			initAudio() {
				this.setAudioVolume()
				if(this.musicState.musicEffectSate != 'off') {
					this.$innerAudioContext.src = '/static/assets/audio/welcome.mp3'
					// this.$innerAudioContext.autoplay = true
					this.$innerAudioContext.play()
					this.$innerAudioContext.addEventListener('playing', () => {
						this.played = 'played'
					})
				}else{
					this.$innerAudioContext.pause()
				}
				setTimeout( () => {
					if(this.musicState.backgroundMusicState != 'off') {
						this.$innerAudioContext.src = '/static/assets/audio/bg001.mp3'
						this.$innerAudioContext.loop = true
						this.$innerAudioContext.autoplay = true
						this.$innerAudioContext.play()
						this.$innerAudioContext.addEventListener('playing', () => {
							this.played = 'played'
						})
					}else{
						this.$innerAudioContext.pause()
					}
					this.welcomePlayed = true
					//首次不加载
					if(this.played == 'init') {
						this.played = 'notPlayed'
					}
				},3500)
			},
			/**
			 * 获取游戏表格信息
			 * */
			getGameTableInfo(){
				apiService.gameTableInfo({id: this.typeId}).then(res => {
					if(res.data.code === 200) {
						if(res.data.data.end_time < 6) {
							this.activeColor = 'red'
						}else {
							this.activeColor = '#78E07A'
						}
						this.percent = res.data.data.end_time / res.data.data.countdown_time * 100
						this.tableInfo = res.data.data
						this.setActivityDescribe()
					}
					this.timer = setTimeout(() => {
						this.getGameTableInfo()
					},1000)
				}).catch(err => {
					console.log(err)
				})
			},
			
			/**
			 * 启动音效
			 * @param {audioName} 音频文件名----全名 
			 * */
			startSoundEffect(audioName) {
				//用户未开启音效不播放
				if(this.musicState.musicEffectSate == 'off' || !this.audio ) {
					return
				}
				//音频
				// let audio = new Audio()
				this.setAudioVolume()
				this.audio.src = `/static/assets/audio/${audioName}`
				this.audio.autoplay = true
				this.audio.play()
				this.audio.addEventListener('ended',  () => {  
				    // this.audio.pause()
				}, false); 
			},
			
			/**
			 * 设置音量
			 * **/
			setAudioVolume() {
				// 当页面由隐藏
				if(!this.audio) {
					return
				}
				if (this.pageVisibility) {
					// this.audio.volume = 0
					// this.$innerAudioContext.volume = 0
					this.audio.pause()
					this.$innerAudioContext.pause()
				}
				 // 当页面由隐藏至显示时
				if (!this.pageVisibility) {  
					// this.audio.volume = 1
					// this.$innerAudioContext.volume = 1
					this.audio.play()
					this.$innerAudioContext.play()
				}
			},
			
			/**
			 * 设置活动描述
			 * */
			setActivityDescribe(){
				//模拟没有重新请求
				if(this.endTime == this.tableInfo.end_time ) {
					this.secondRequest = false
				}else {
					//模拟表示重新请求过
					this.secondRequest = true
				}
				this.endTime = this.tableInfo.end_time
				if(this.tableInfo.end_time == 0 && this.secondRequest) {
					this.showOpen = true
					this.activityDescribe = '开牌中...'
					this.betState = false
					if(this.welcomePlayed) {
						this.startSoundEffect("stopbets.mp3")
					}
				}
				if(!this.firstShowDescribe) {
					this.firstShowDescribe = true
					this.activityDescribe = '已开局,请投注'
					this.showOpen = true
					if(this.welcomePlayed) {
						this.startSoundEffect("startbets.mp3")
					}
				}
				if(this.tableInfo.end_time != 0) {
					this.betState = true
				}
				setTimeout(() => {
					this.showOpen = false
				},3000)
			},
			checkIsLogin(){
				let login_user_info = uni.getStorageSync('login_user_info')
				if(login_user_info.id > 0){
				}else{
					uni.navigateTo({
						url:"../login/login"
					})
				}
			}
		}		
	}
</script>

<style lang="scss" scoped>
	.live-page::before{
		content: " ";
		width: 100%;
		height: 100%;
		content: " ";
		top: 0;
		position: absolute;
		background: url(../../static/img/login/background.png) no-repeat;
		background-position: 50% -228rpx;
		opacity: 0.2;
	}
	.live-page {
		position: relative;
		width: 100%;
		height: 100%;
		
		.live-container{
			height: 100%;
			overflow: auto;
			padding-bottom: 10rpx;
			position: relative;
		}
		.live-welcome{
			height: 100%;
			width: 100%;
			position: fixed;
			display: flex;
			z-index: 999;
			background-color: rgba(0,0,0,0.5);
			align-items: center;
			color: #d3d4d3;
		}
		.live-loading{
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9;
			color: white;
		}
		.live-loading-panel{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		@keyframes loadingRotate{
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(360deg);
			}
		}
		.live-loading-img{
			width: 100rpx;
			height: 100rpx;
			animation: loadingRotate 1.2s linear infinite;
		}
		.live-wel-panel{
			border: 2rpx solid #72654d;
			border-radius: 20rpx;
			width: 60%;
			height: 208rpx;
			margin: 0 auto;
			background-color: rgba(0,0,0,1);
			text-align: center;
			padding: 20rpx 40rpx;
			font-size: 14px;
			
		}
		.live-details{
			border: none; 
			height: 100%;
			width: 100%;
			padding: 0;
		}
		.live-wel-confirm{
			color: black;
			background-color: #ecd1a3;
			width: 170rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 30rpx;
			margin: 40rpx auto 4rpx;
		}
		.live-box {
			height: 528rpx;
			overflow: hidden;
			position: relative;
		}
		.live-count-down{
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			z-index: 5;
			left: 5px;
		}
		
		.live-video{
			position: absolute;
			width: 100%;
			overflow: hidden;
			height: 100%;
			z-index: 1;
			border: none;
		}
		.live-video-top{
			z-index: 2;
			height: 0rpx;
		}
		
		.live-video-child{
			position: relative;
			height: 100%;
		}

		.details {
			height: 264rpx;
			width: 100%;
			position: relative;
		}
		.live-result{
			position: absolute;
			z-index: 10000;
			height: 286rpx;
			font-size: 26px;
			font-weight: 800;
			font-family: '隶书';
			width: 100%;
			background-color: rgba(0, 0, 0, .7);
			display: flex;
			text-shadow:1px 1px 0px #b7b7c1, 1px 1px 0px #b7b7c1;;
		}
		.logo {
			width: 280rpx;
			height: 80rpx;
			margin: 0 auto;
			margin-top: 0rpx;
			// background: url(/static/img/login/yb11.png) no-repeat;
			// background-size: 100% 100%;
		}
		
		.live-count-second{
			color: #78E07A;
			margin-top: -5px;
			margin-left: -5px;
			font-size: 20px;
			font-weight: bold;
		}
		.live-active-color{
			color: red;
		}
		.live-result-txt{
			display: flex;
			flex-direction: column;
			width: 50rpx;
			margin-top: 78rpx;
		}
		.live-result-panel{
			position: relative;
		}
		.live-result-t-card{
			padding: 0 42rpx;
		}
		.live-equality{
			width: 120rpx;
			font-size: 22px;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.live-result-detail{
			font-size: 12px;
			font-family: '隶书';
			color: white;
			font-weight: 600;
			margin-bottom: 12rpx;
			margin-top: 10rpx;
		}
		.live-result-detail text{
			margin:0 10rpx;
		}
		.live-de-xian{
			color: #0100a9;
		}
		.live-de-he{
			color: #009949;
		}
		.live-equality text{
			width: 60rpx;
			height: 136rpx;
			font-size: 17px;
			text-align: center;
			display: flex;
			font-weight: 400;
			align-items: center;
			justify-content: center;
			padding-bottom: 8rpx;
			border-radius: 32rpx;
		}
		.live-zoom{
			position: absolute;
			z-index: 10;
			right: 34rpx;
			top: 20rpx;
		}
		.live-de-zhuang{
			color: #dc1a1f
		}
		.live-zoom image{
			width: 36rpx;
			height: 36rpx;
		}
		.live-equality-he{
			background-color: rgba(19,133,53,1);
		}
		.live-equality-zhuang{
			background-color: rgba(255,0,0,1);
		}
		.live-equality-xian{
			background-color: rgba(38,67,255,1);
		}
		.live-result-t-card image{
			transform: rotate(90deg);
		}
		.live-result-top{
			align-items: center;
			height: 140rpx;
			position: relative;
			display: flex;
			padding: 0 16rpx;
		}
		.live-result-tally{
			margin-top: -10rpx;
			font-size: 18px;
		}
		.live-result-tally-r{
			text-align: right;
		}
		.live-result-card{
			width: 104rpx;
			height: 140rpx;
			margin: 0 8rpx;
			border-radius: 4rpx;
		}
		.live-win-bg{
			animation: backRedFlicker 1000ms infinite;
			-webkit-animation:backRedFlicker 1000ms infinite;
		}
		.live-win-blue-bg{
			animation: backBlueFlicker 1000ms infinite;
			-webkit-animation:backBlueFlicker 1000ms infinite;
		}
		.live-win-green-bg{
			animation: backGreenFlicker 1000ms infinite;
			-webkit-animation:backGreenFlicker 1000ms infinite;
		}
		.live-result-end{
			justify-content: flex-end;
		}
		.live-result-blue{
			color: #2643ff;
		}
		.live-result-red{
			color: #f0262c;
		}
		.live-result-c-end{
			justify-content: flex-end;
		}
		.live-result-bottom{
			display: flex;
			padding: 0 42rpx;
		}
		.live-notice{
			position: absolute;
			padding: 0 20rpx;
			padding-left: 76rpx;
			height: 66rpx;
			background-size: 100% 100%;
			width: calc(66rpx * 4.14117);
			top: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 99;
			color: #dac193;
			display: flex;
			align-items: center;
			background-image: linear-gradient(to right, black, #454141) ;
			animation:mobileNote 500ms;
			-webkit-animation:mobileNote 500ms;
			background-image: url(/static/img/live/noticeLogo.png);
		}
		
		@keyframes mobileNote{
			from {top:100rpx;}
			to {top:10rpx;}
		}
		
		@-webkit-keyframes mobileNote 
		{
			from {top:100rpx;}
			to {top:10rpx;}
		}
		
		@keyframes backRedFlicker{
			from {background-color: rgba(255,0,0,1);}
			to {background-color: rgba(255,0,0,.1);}
		}
		
		@-webkit-keyframes backRedFlicker 
		{
			from {background-color: rgba(255,0,0,1);}
			to {background-color: rgba(255,0,0,.1);}
		}
		@keyframes backBlueFlicker{
			from {background-color: rgba(38,67,255,1);}
			to {background-color: rgba(38,67,255,.1);}
		}
		
		@-webkit-keyframes backBlueFlicker 
		{
			from {background-color: rgba(38,67,255,1);}
			to {background-color: rgba(38,67,255,.1);}
		}
		
		@keyframes backGreenFlicker{
			from {background-color: rgba(19,133,53,1);}
			to {background-color: rgba(19,133,53,.1);}
		}
		
		@-webkit-keyframes backGreenFlicker 
		{
			from {background-color: rgba(19,133,53,1);}
			to {background-color: rgba(19,133,53,.1);}
		}
	}
	::v-deep iframe{top: 0}
</style>
